<!-- 公司管理 -->
<template>
  <div class="company-page">
    <div class="company-table">
      <div class="title">公司管理</div>
      <div class="search-box">
        <n-input
          maxlength="50"
          v-model:value="pagination.companyName"
          class="search-input"
          placeholder="请输入"
          @input="searchFun"
        >
          <template #suffix>
            <icons
              class="icon"
              style="color: rgba(255, 255, 255, 0.2)"
              name="search"
            />
          </template>
        </n-input>
        <n-button class="add-btn" @click="closeEdit(true)">+新增</n-button>
      </div>
      <n-data-table
        remote
        :columns="companyColumns"
        :data="companyData"
        :row-props="rowProps"
        :pagination="pagination"
        :bordered="false"
        @update:page="handlePageChange"
      />
    </div>
  </div>
  <editDialog
    :showModal="openEditDialog"
    :dialogTitle="companyInfo.id ? '编辑' : '新增'"
    @closeModel="closeEdit"
  >
    <div class="label-item">
      <div class="label-name">公司名称</div>
      <div class="label-input">
        <n-input
          maxlength="50"
          v-model:value="companyInfo.companyName"
          type="text"
          placeholder="请输入公司名称"
        />
      </div>
    </div>
    <div class="label-item">
      <div class="label-name">公司LOGO</div>
      <div class="label-input">
        <n-radio
          style="font-size: 14px"
          :checked="companyInfo.logoType === 'picture'"
          value="picture"
          name="basic-demo"
          :default-checked="true"
          @change="handleChange"
        >
          单独图片
        </n-radio>
        <n-radio
          style="margin-left: 60px; font-size: 14px"
          :checked="companyInfo.logoType === 'text'"
          value="text"
          name="basic-demo"
          @change="handleChange"
        >
          单独文字
        </n-radio>
      </div>
    </div>
    <div class="img-upload" v-if="companyInfo.logoType === 'picture'">
      <n-upload
        list-type="image-card"
        :default-file-list="previewFileList"
        :custom-request="customRequest"
        accept="image/png, image/jpeg,image/webp"
        :max="1"
      >
        点击上传
      </n-upload>
    </div>
    <div class="label-item" v-if="companyInfo.logoType === 'text'">
      <div class="label-input" style="margin-left: 90px">
        <n-input
          maxlength="50"
          v-model:value="companyInfo.logo"
          type="text"
          placeholder="请输入"
        />
      </div>
    </div>
    <div class="label-item">
      <div class="label-name">选择模板</div>
      <div class="label-input">
        <n-select
          v-model:value="companyInfo.moduleId"
          :options="templateData"
          placeholder="请选择"
        />
      </div>
    </div>
    <div class="add-view">
      <div class="add-btn" @click="InsertCompanyDataFun">保存</div>
    </div>
  </editDialog>
  <!-- 删除弹框 -->
  <n-modal
    :mask-closable="false"
    class="del-dialog"
    v-model:show="openDelDialog"
    preset="dialog"
    :show-icon="false"
    :on-close="closeDelDialog"
    transform-origin="center"
    style="background: #60676c; color: #fff; width: 700px"
  >
    <template #header>
      <div class="title-font">删除</div>
    </template>
    <div class="notice-info">
      确定要删除{{ companyInfo.companyName }}公司吗？删除后将无法恢复
    </div>
    <div class="footer">
      <n-button class="item-btn btn-border" @click="cancelBtn">取消</n-button>
      <n-button class="item-btn btn-bg" @click="deleteBtn">删除</n-button>
    </div>
  </n-modal>
</template>
<script lang="ts" setup>
import { ref, h, computed, onMounted } from "vue";
import { NButton, NH1, NImage } from "naive-ui";
import editDialog from "@/components/Dialog/index.vue";
import { useAppStore } from "@/store/modules/user";
import { uuid } from "@/tools/radom";
import { UploadCustomRequestOptions } from "naive-ui";
import {
  InsertCompanyData,
  GetAllCompanyData,
  UpdateCompanyData,
  DeleteCompanyData,
  UploadFile,
  GetAllPageModule,
} from "@/server";
const store = useAppStore();
// 模版列表
const templateData = ref([]);
const companyInfo = ref({
  companyName: "",
  logoType: "picture",
  logo: "",
  moduleId: "",
}) as any;
const previewFileList = ref([]) as any;
const companyColumns = [
  {
    title: "公司名称",
    key: "companyName",
    width: "30%",
  },
  {
    title: "LOGO",
    key: "logo",
    width: "20%",
    render(row: any) {
      if (row.logoType === "picture") {
        return h(NImage, {
          width: "25",
          height: "25",
          src: row.logo,
        });
      } else {
        return h("span", null, { default: () => row.logo });
      }
    },
  },
  {
    title: "模板",
    key: "moduleId",
    width: "20%",
    render(row: any) {
      return h("span", null, {
        default: () => {
          const data: any = templateData.value.find(
            (e: any) => e.value === row.moduleId
          );
          if (data) {
            return data.label;
          } else {
            return "";
          }
        },
      });
    },
  },
  {
    title: "操作",
    key: "actions",
    align: "center",
    width: "10%",
    render(row: any) {
      const editBtn = h(
        NButton,
        {
          style: {
            color: "rgba(0, 191, 227, 1)",
            background: "none",
            padding: "0",
            marginRight: "10px",
          },
          strong: true,
          tertiary: true,
          size: "small",
          onClick: () => {
            previewFileList.value = [
              {
                id: "1",
                name: "",
                status: "finished",
                url: row.logo,
              },
            ];
            companyInfo.value = JSON.parse(JSON.stringify(row));
            openEditDialog.value = true;
          },
        },
        { default: () => "编辑" }
      );
      const delBtn = h(
        NButton,
        {
          style: {
            color: "#EE2908",
            background: "none",
            padding: "0",
          },
          strong: true,
          tertiary: true,
          size: "small",
          onClick: () => {
            companyInfo.value = JSON.parse(JSON.stringify(row));
            openDelDialog.value = true;
          },
        },
        { default: () => "删除" }
      );
      return [editBtn, delBtn];
    },
  },
];
const companyData = ref([]) as any;
const rowProps = () => {
  return {
    style: "cursor: pointer;height: 55px;over",
  };
};
const customRequest = async ({
  file,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      companyInfo.value.logo = imgUrl;
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};
const pagination = ref({
  companyName: "",
  page: 1,
  pageSize: 8,
  pageCount: 1,
  pageSlot: 7,
});
//编辑弹框状态
const openEditDialog = ref(false);
//关闭编辑
const closeEdit = (val: boolean) => {
  openEditDialog.value = val;
  previewFileList.value = [];
  companyInfo.value = {
    companyName: "",
    logoType: "picture",
    logo: "",
    moduleId: "",
  };
};

//删除弹框
const openDelDialog = ref(false);
// 关闭删除
const closeDelDialog = () => {
  openDelDialog.value = false;
};

//单选按钮
const handleChange = (e: Event) => {
  console.log("单选", e);
  companyInfo.value.logoType = (e.target as HTMLInputElement).value;
};

//取消
const cancelBtn = () => {
  openDelDialog.value = false;
};
//删除
const deleteBtn = async () => {
  const res: any = await DeleteCompanyData({ id: companyInfo.value.id });
  if (res.result.isSuccess) {
    store.success(res.result.message);
    openDelDialog.value = false;
    pagination.value.page = 1;

    GetAllCompanyDataFun();
  } else {
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 新增模版
 * @return {*}
 * @author: cool panda
 */
const InsertCompanyDataFun = async () => {
  if (!companyInfo.value.companyName) {
    store.warning("请输入公司名称");
    return false;
  }
  if (!companyInfo.value.logo) {
    store.warning("请输入公司logo");
    return false;
  }
  if (!companyInfo.value.moduleId) {
    store.warning("请选择模版");
    return false;
  }
  const params = {
    token: "",
    data: companyInfo.value,
  };
  let res: any = null;
  if (companyInfo.value.id) {
    res = await UpdateCompanyData(params);
  } else {
    res = await InsertCompanyData(params);
  }

  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    closeEdit(false);
    GetAllCompanyDataFun();
    // templateData.value = res.result.result;
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const time = ref(null) as any;
const searchFun = () => {
  if (time.value) {
    clearTimeout(time.value);
  }
  time.value = setTimeout(() => {
    GetAllCompanyDataFun();
  }, 500);
};
const lock = ref(false);
const unLock = () => {
  setTimeout(() => {
    lock.value = false;
  }, 1000);
};
const handlePageChange = (curent: number) => {
  pagination.value.page = curent;
  GetAllCompanyDataFun();
};
/**
 * @description: 获取模版信息
 * @return {*}
 * @author: cool panda
 */
const GetAllCompanyDataFun = async () => {
  if (lock.value) {
    return false;
  }
  lock.value = true;
  const params = {
    companyName: pagination.value.companyName,
    pageNumber: pagination.value.page,
    pageSize: pagination.value.pageSize,
  };
  const res: any = await GetAllCompanyData(params);
  if (res.result.isSuccess) {
    unLock();
    pagination.value.pageCount = Math.ceil(
      res.result.otherResult / pagination.value.pageSize
    );
    companyData.value = res.result.result;
  } else {
    unLock();
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 获取模版信息
 * @return {*}
 * @author: cool panda
 */
const GetAllPageModuleFun = async () => {
  const res: any = await GetAllPageModule({ pageNumber: 1, pageSize: 1000 });
  if (res.result.isSuccess) {
    const list = res.result.result;
    if (list) {
      templateData.value = list.map((e: any) => {
        const item = {
          label: e.moduleName,
          value: e.id,
        };
        return item;
      });
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
onMounted(() => {
  GetAllCompanyDataFun();
  GetAllPageModuleFun();
});
</script>
<style lang="less" scoped>
:deep(.n-input) {
  --n-color: rgba(57, 66, 72, 1) !important;
  --n-color-focus: rgba(57, 66, 72, 1) !important;
  --n-text-color: rgb(255, 255, 255) !important;
  --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
  --n-border-hover: 1px solid #02a8ae !important;
  --n-border-focus: 1px solid #02a8ae !important;
  --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
:deep(.n-input__input) {
  text-align: left !important;
}
:deep(.n-data-table) {
  --n-th-color: rgba(57, 66, 72, 1) !important;
  --n-td-color: rgba(96, 103, 108, 1) !important;
  --n-th-text-color: #fff !important;
  --n-td-text-color: #fff !important;
  --n-td-color-hover: rgba(2, 168, 174, 0.3) !important;
  --n-border-color: rgba(57, 66, 72, 1) !important;
}
:deep(.n-pagination) {
  --n-item-border-active: 1px solid #02a8ae !important;
  --n-item-text-color-active: #fff !important;
  --n-item-text-color-hover: #02a8ae !important;
  --n-item-color: #fff !important;
  --n-item-color-hover: rgba(1, 192, 228, 1) !important;
  --n-item-color-active: rgba(1, 192, 228, 1) !important;
  --n-item-color-pressed: #fff !important;
  --n-item-color-active-hover: rgba(1, 192, 228, 1) !important;
  --n-button-color: #fff !important;
  --n-button-color-hover: rgba(1, 192, 228, 1) !important;
}
:deep(.n-data-table__pagination) {
  justify-content: center;
}
:deep(.n-button) {
  --n-border: none !important;
}
:deep(.n-upload) {
  --n-dragger-color: #60676c !important;
  --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
}
.company-page {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .company-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 1420px;
    // width: 1417px;
    height: 680px;
    padding: 25px 55px;
    background: #394248;
    .title {
      height: 35px;
      line-height: 35px;
      font-size: 24px;
      color: #02a8ae;
      text-align: left;
      margin-bottom: 15px;
    }
    .search-box {
      display: flex;
      height: 35px;
      margin-bottom: 20px;
      .search-input {
        width: 350px;
      }
      .add-btn {
        font-size: 14px;
        color: #fff;
        background-color: #01c0e4;
        margin-left: 30px;
        // border: none;
      }
    }
  }
}
.label-item {
  display: flex;
  align-items: center;
  height: 35px;
  margin-bottom: 20px;
  .label-name {
    width: 80px;
    font-size: 16px;
    margin-right: 10px;
  }
  .label-input {
    flex: 1;
    :deep(.n-input) {
      --n-color: #60676c !important;
      --n-color-focus: #60676c !important;
    }
    :deep(.n-radio) {
      --n-color-active: #1677ff !important;
      --n-dot-color-active: #fff !important;
      --n-box-shadow-active: inset 0 0 0 1px #1677ff !important;
      --n-box-shadow-hover: inset 0 0 0 1px #1677ff !important;
    }
    :deep(.n-radio__label) {
      --n-text-color: #fff !important;
    }
    :deep(.n-base-selection) {
      --n-color: #60676c !important;
      //   --n-color-focus: #60676c !important;
      //   --n-placeholder-color: red !important;
      --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
      --n-border-hover: 1px solid #02a8ae !important;
      --n-border-focus: 1px solid #02a8ae !important;
      --n-border-active: 1px solid #02a8ae !important;
      --n-text-color: #fff !important;
      --n-color-active: #60676c !important;
    }
  }
}
.add-view {
  margin: 40px 0 20px;
  .add-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100px;
    height: 36px;
    background: #01c0e4;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
      0px 2px 5px 0px rgba(25, 15, 15, 0.07),
      0px 5px 8px 0px rgba(0, 0, 0, 0.05);
  }
}
.img-upload {
  margin-left: 90px;
  margin-bottom: 20px;
}
.del-dialog {
  // width: 700px;
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }
  .notice-info {
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin: 60px 0;
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    .item-btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      margin-right: 30px;
    }
    .btn-border {
      border: 1px solid #fff;
    }
    .btn-bg {
      background: #ee2908;
    }
  }
}
</style>
